<template>
  <div class="chat-session-list">
    <!-- 顶部主区域已有“新建”按钮，此处移除内部按钮 -->
    <el-scrollbar class="sessions-scroll">
      <div
        v-for="s in sessions"
        :key="s.id"
        :class="['session-item', { active: s.id === currentId }]"
        @click="onSelect(s)"
      >
        <div class="title-row" @dblclick.stop="startRename(s)">
          <template v-if="editingId === s.id">
            <el-input
              ref="renameInput"
              v-model="renameDraft"
              size="small"
              class="rename-input"
              placeholder="输入名称"
              @keydown.enter.prevent="confirmRename"
              @blur="confirmRename"
            />
          </template>
          <template v-else>
            <span class="title" :title="s.title || ('会话 ' + s.id)">{{ s.title || ('会话 ' + s.id) }}</span>
            <el-dropdown trigger="click" @command="cmd => handleCommand(cmd, s)">
              <span class="more" @click.stop aria-label="更多操作">⋮</span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="rename">重命名</el-dropdown-item>
                  <el-dropdown-item command="clear">清空</el-dropdown-item>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </div>
      </div>
      <div v-if="!sessions.length && !loading" class="empty">暂无会话</div>
      <div v-if="loading" class="loading">加载中...</div>
    </el-scrollbar>
  </div>
</template>
<script setup>
import dayjs from 'dayjs'
import { ref, nextTick } from 'vue'

const props = defineProps({
  sessions: { type: Array, default: () => [] },
  currentId: { type: Number, default: null },
  loading: { type: Boolean, default: false },
  creating: { type: Boolean, default: false }
})
const emit = defineEmits(['select','create','rename','delete','clear'])

// 内联重命名状态
const editingId = ref(null)
const renameDraft = ref('')
const renameInput = ref(null)

function startRename(s){
  editingId.value = s.id
  renameDraft.value = s.title || ''
  nextTick(()=>{ if (renameInput.value?.input) renameInput.value.input.focus() })
}
function confirmRename(){
  if (editingId.value === null) return
  const val = renameDraft.value.trim()
  if (val) emit('rename', editingId.value, val)
  editingId.value = null
}
function onSelect(s){
  // 若正在编辑，点击别的会话先提交当前编辑
  if (editingId.value !== null && editingId.value !== s.id){ confirmRename() }
  emit('select', s.id)
}

function formatTime(t){
  try { return dayjs(t).format('MM-DD HH:mm') } catch { return '' }
}
function handleCommand(cmd, s){
  if (cmd === 'rename') startRename(s)
  else if (cmd === 'delete') emit('delete', s)
  else if (cmd === 'clear') emit('clear', s)
}
</script>
<style scoped>
.chat-session-list { display:flex; flex-direction:column; height:100%; padding:4px 6px 10px; }
.sessions-scroll { flex:1; }
.session-item { position:relative; padding:10px 12px 10px 14px; margin:4px 2px; border-radius:18px; cursor:pointer; user-select:none; display:flex; flex-direction:column; gap:4px; background:transparent; transition:background .28s, box-shadow .28s, transform .25s; }
.session-item::before { content:''; position:absolute; inset:0; border-radius:18px; background:linear-gradient(120deg,rgba(255,255,255,0.55),rgba(255,255,255,0.25)); opacity:0; transition:opacity .28s; pointer-events:none; }
.session-item:hover { background:linear-gradient(120deg,#f8f5ef,#f1ebe2); box-shadow:0 2px 6px -2px rgba(0,0,0,0.08); }
.session-item:hover::before { opacity:1; }
.session-item.active { background:linear-gradient(130deg,#e8dcc9,#dac6ad); box-shadow:0 4px 12px -4px rgba(120,90,40,0.28); }
.session-item.active .title { color:#5a4324; font-weight:700; }
.title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.title { font-size:13px; font-weight:600; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.5px; }
.more { font-size:18px; line-height:1; padding:0 4px; cursor:pointer; color:#8a7358; transition:color .25s, transform .25s; }
.session-item:hover .more { color:#5d452a; }
.session-item.active .more { color:#553a1b; }
.empty, .loading { text-align:center; padding:14px 4px; font-size:12px; color:#8d857a; }
.rename-input :deep(.el-input__wrapper){ border-radius:14px !important; padding:0 8px; background:linear-gradient(120deg,#fff,#f1ebe2); box-shadow:none; border:1px solid rgba(180,140,90,0.4); }
.rename-input :deep(.el-input__inner){ font-size:12.5px; font-weight:600; letter-spacing:.5px; }

.sessions-scroll :deep(.el-scrollbar__view){ padding-bottom:80px; }

/* 下拉菜单主题 */
:deep(.el-dropdown__popper .el-dropdown-menu){
  padding:6px 6px 8px; background:linear-gradient(135deg,#fbfaf8,#f2ece3); border:1px solid #decfbf; box-shadow:0 6px 24px -8px rgba(0,0,0,.12),0 2px 8px -2px rgba(0,0,0,.06); border-radius:14px; }
:deep(.el-dropdown-menu__item){ font-size:12.5px; border-radius:10px; margin:2px 0; padding:8px 12px; font-weight:500; letter-spacing:.5px; color:#5d4934; }
:deep(.el-dropdown-menu__item:hover){ background:linear-gradient(120deg,#f3ede5,#ebe3d8); color:#503b26; }
:deep(.el-dropdown-menu__item.is-danger){ color:#c45656; }
:deep(.el-dropdown-menu__item.is-danger:hover){ background:linear-gradient(120deg,#fdecea,#f9e0dd); color:#b11f1f; }

@media (prefers-color-scheme: dark) {
  .session-item { background:transparent; }
  .session-item:hover { background:linear-gradient(120deg,#38322b,#2f2923); box-shadow:0 3px 10px -4px rgba(0,0,0,0.55); }
  .session-item.active { background:linear-gradient(130deg,#5a4a37,#463a2b); box-shadow:0 6px 16px -6px rgba(0,0,0,0.7); }
  .session-item.active .title { color:#f5e8d4; }
  .title { color:#e9ddcf; }
  .more { color:#cbb59d; }
  .session-item:hover .more { color:#efd7bc; }
  .empty, .loading { color:#b7aa9d; }
}
</style>
